<template>
    <div class="analysis-home">
        <!-- <nav class="u-f">
            <div>
                <img src="@/assets/imgs/tang.png" />
            </div>
            <div class="nav-btn-box u-f-ajc">
                <a class="p-20" href="javascript:;">人口统计</a>
                <a class="p-20" href="javascript:;">人口迁徙</a>
                <a class="p-20" href="javascript:;">生卒地变迁</a>
                <a class="p-20" href="javascript:;">姓氏统计</a>
                <a class="p-20" href="javascript:;">人物关系</a>
                <a class="p-20" href="javascript:;">诗人网络</a>
            </div>
        </nav> -->
        <main>
            <article>
                <population-statistics class="h100" />
            </article>
            <article>
                <population-migration class="h100" />
            </article>
            <article>
                <population-die-address class="h100" />
            </article>
            <article>
                <population-surname class="h100" />
            </article>
            <article>
                <population-relationship class="h100" />
            </article>
            <article>
                <population-relationship-network class="h100" />
            </article>
        </main>
    </div>
</template>
<script>
import PopulationStatistics from './conponents/PopulationStatistics'
import PopulationMigration from './conponents/PopulationMigration'
import PopulationDieAddress from './conponents/PopulationDieAddress'
import PopulationSurname from './conponents/PopulationSurname'
import PopulationRelationship from './conponents/PopulationRelationship'
import PopulationRelationshipNetwork from './conponents/PopulationRelationshipNetwork'
export default {
    name:'AnalysisHome',
    components: {
        PopulationStatistics,
        PopulationMigration,
        PopulationDieAddress,
        PopulationSurname,
        PopulationRelationship,
        PopulationRelationshipNetwork
    },
    data() {
        return {}
    },
    created() {
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>
%nav-focus{
    background-color: #a04c3b;
    color: white;
}

.analysis-home {
    height: 100%;
    nav{
        background-color: #eeebe3;
        .nav-btn-box {
            a {
                text-decoration: none;
                outline: none;
                color: #000;
            }
            :hover {
                @extend %nav-focus
            }
        }
    }
    main{
        overflow: auto;
        // height: calc(100vh - 145px);
        height: calc(100vh - 60px);
        scrollbar-width: none;
        ::-webkit-scrollbar{
            display: none;
        }
        article {
            height: 100%;
            background-image: url('@/assets/imgs/background.jpg');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }
    }
}
</style>